<template>
  <el-drawer destroy-on-close
             direction="rtl"
             :modal="false"
             size="280px"
             :visible="visible"
             @close="onClose">
    <template #title>
      <div>
        <ju-icon class="text-primary me-1"
                 icon="palette-fill"
                 svg-icon></ju-icon>
        个性化
      </div>
    </template>
    <div class="px-3">
      <el-divider>预设主题</el-divider>
      <el-empty class="py-2"
                description="敬请期待"
                :image-size="100"></el-empty>
      <el-divider>主题设置</el-divider>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>选择模式</label>
        <el-radio-group size="mini"
                        v-model="themeSettings.colorScheme">
          <el-radio-button label="light">浅色</el-radio-button>
          <el-radio-button label="dark">深色</el-radio-button>
        </el-radio-group>
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>主题色</label>
        <el-color-picker size="mini"
                         v-model="themeSettings.primaryColor" />
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>顶部栏颜色</label>
        <el-color-picker size="mini"
                         v-model="themeSettings.primaryColor" />
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>左侧菜单背景色</label>
        <el-color-picker size="mini"
                         v-model="themeSettings.primaryColor" />
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>左侧菜单文字颜色</label>
        <el-color-picker size="mini"
                         v-model="themeSettings.primaryColor" />
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>表格头部背景色</label>
        <el-color-picker size="mini"
                         v-model="themeSettings.primaryColor" />
      </div>
      <div class="setting-item d-flex align-items-center mb-3">
        <label>表格边框</label>
        <el-select style="width:110px"
                   v-model="themeSettings.table.border">
          <el-option label="默认"
                     value="default"></el-option>
          <el-option label="全部边框"
                     value="full"></el-option>
          <el-option label="外边框"
                     value="outer"></el-option>
          <el-option label="内边框"
                     value="inner"></el-option>
        </el-select>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";
  import store from "./store";

  @Component({
    name: "ThemeSettings",
  })
  export default class extends Vue {
    get visible() {
      return store.visible;
    }
    themeSettings = {
      colorScheme: "light",
      primaryColor: "#409eff",
      table: {
        border: "default",
      },
    };

    onClose() {
      store.visible = false;
    }
  }
</script>

<style lang="scss" scoped>
  .setting-item {
    > label {
      color: var(--theme-secondary);
      flex: 1;
    }
  }
</style>
